<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/img/png/Logo.png" type="image/png" rel="icon" sizes="192x192">

    <title>Table</title>
</head>
<body style="background-color: rgba(0,0,0,0.4)">
<main class="container my-5 bg-white p-3 border shadow rounded">

    <nav class="navbar navbar-expand-md navbar-light bg-white mb-4 border-bottom">
        <div class="container-fluid">
            <a class="navbar-brand fw-bold" href="#">Surorie</a>
            <div class="collapse navbar-collapse">
                <div class="navbar-nav">
                    <a class="nav-link" href="/new">Add</a>
                </div>
            </div>
        </div>
    </nav>

    <section class="border p-2 overflow-auto" style="height: 500px">
        <!-- template to generate a HTML table from a list of tuples (or list of lists, or tuple of tuples or ...)-->
        <p>The open items are as follows:</p>
        <table class="table table-hover">
            <tr class="text-muted text-uppercase small">
                <!-- The first header is empty - Is intentional -->
                <th></th>
                <th>ID</th>
                <th>Note</th>
            </tr>
            %for row in rows:
            <tr>
                <td><input class="form-check-input" type="checkbox" value="" aria-label="..."></td>
                %for col in row:
                <td>{{col}}</td>
                %end
            </tr>
            %end
        </table>

        <div style="position: relative; top: -60%; left: 80%;">
            <div class="btn-group" style="position: fixed;">
                <!-- Is important specific the background color in this elements, if not, the color
                  for default is transparent, and if the color is specific in the parent <btn-group>
                  the rounded border not will be rendered correctly. -->
                <button class="btn border bg-white"><img src="static/img/svg/Edit.svg" alt="Edit"/></button>
                <button class="btn border bg-white"><img src="static/img/svg/Copy.svg" alt="Copy"/></button>
                <button class="btn border bg-white"><img src="static/img/svg/Delete.svg" alt="Delete"/></button>
            </div>
        </div>
    </section>

    <footer class="text-center pt-3">
        <p class="text-muted small">Copyright: Joan &copy; 2020</p>
    </footer>
</main>
<script src="static/js/bootstrap.bundle.min.js"></script>
</body>
</html>